<template>
  <div class="sidebar-classify">
    <a-skeleton active v-if="outRoleGroupList.length === 0" />
    <a-row>
      <a-col :span="24" v-for="(item, index) in outRoleGroupList" :key="index">
        <div class="title item" v-if="item.groupType === 2">
          {{ item.groupName }} <span class="new-built" @click="add">+新建</span>
        </div>
        <div class="title item" v-else>{{ item.groupName }}</div>
        <a-row>
          <a-col
            :span="24"
            class="item item-col"
            v-for="(itemSub, indexSub) in item.roleInfoVOList"
            :key="indexSub"
            @click="onItem(itemSub.id, item.action, item.groupId)"
            :class="{ active: isActive === itemSub.id }"
          >
            <div class="item-roleName" v-if="item.groupType === 2">
              {{ itemSub.roleName }}
              <span class="item-bnt">
                <a-icon type="edit" @click.stop="edit(itemSub)" />
                <a-icon type="delete" @click.stop="del(itemSub)" />
              </span>
            </div>
            <div class="item-roleName" v-else>{{ itemSub.roleName }}</div></a-col
          >
        </a-row>
      </a-col>
    </a-row>
    <Modal :title="title" ref="modal" @ok="submit">
      <a-row class="item-row">
        <a-col :span="6" class="item-title"><em style="color:#f00">*</em>角色名称：</a-col>
        <a-col :span="14">
          <a-input v-model="form.roleName" placeholder="请输入角色名称" />
        </a-col>
      </a-row>
      <a-row class="item-row">
        <a-col :span="6" class="item-title">角色描述：</a-col>
        <a-col :span="14">
          <a-textarea v-model="form.description" placeholder="请输入角色描述" />
        </a-col>
      </a-row>
      <a-row class="item-row" v-if="type === 'add'">
        <a-col :span="6" class="item-title">角色权限：</a-col>
        <a-col :span="14">
          <a-checkbox v-model="form.isCopy"></a-checkbox>
          <a-select
            style="width: 306px;margin-left:20px;"
            showSearch
            placeholder="选择角色权限"
            optionFilterProp="children"
            @change="handleChange"
          >
            <a-select-option v-for="(item, index) in roleData" :key="index" :value="item.id">{{
              item.roleName
            }}</a-select-option>
          </a-select>
        </a-col>
      </a-row>
    </Modal>
  </div>
</template>
<script>
  import { mapActions, mapState } from 'vuex'
  import Modal from '@/components/base/Popup/Modal'
  export default {
    components: {
      Modal,
    },
    data() {
      return {
        isActive: null,
        title: '新建角色',
        form: {
          roleName: '',
          description: '',
          isCopy: false,
          copyRoleId: '',
        },
        roleData: [],
        type: 'add',
        id: '',
      }
    },
    computed: {
      ...mapState({
        outRoleGroupList: state => state.SysRoleController.outRoleGroupList,
      }),
    },
    async created() {
      //获取角色组列表
      await this.onIsOutRoleGroupList()
      console.log(this.outRoleGroupList)
      this.onItem(
        this.outRoleGroupList[0].roleInfoVOList[0].id,
        this.outRoleGroupList[0].action,
        this.outRoleGroupList[0].groupId,
      )

      this.getRoleData()
    },
    methods: {
      ...mapActions({
        onIsOutRoleGroupList: 'SysRoleController/onIsOutRoleGroupList',
        onAdd: 'SysRoleController/onAdd',
        onUpdate: 'SysRoleController/onUpdate',
        onDel: 'SysRoleController/onDel',
      }),
      //角色组列表点击单个角色
      onItem(val, action, groupId) {
        this.isActive = val
        this.$emit('change', val, action, groupId)
      },
      // 处理新建角色角色列表数据
      getRoleData() {
        this.outRoleGroupList.map(item => {
          this.roleData.push(...item.roleInfoVOList)
        })
      },
      //
      add() {
        this.type = 'add'
        this.title = '新建角色'
        this.form.roleName = ''
        this.form.description = ''
        this.form.isCopy = false
        this.form.copyRoleId = ''
        this.$refs.modal.visible = true
      },
      edit(val) {
        this.type = 'edit'
        this.title = '编辑角色'
        this.$refs.modal.visible = true
        this.id = val.id
        this.form.roleName = val.roleName
        this.form.description = val.description
      },
      del(val) {
        let that = this
        this.$confirm({
          title: `角色删除确认`,
          content: `确定要将“${val.roleName}”角色删除?`,
          async onOk() {
            await that.onDel(val.id)
            await that.onIsOutRoleGroupList()
          },
          onCancel() {},
        })
      },
      handleChange(val) {
        this.form.copyRoleId = val
      },
      async submit() {
        this.$refs.modal.visible = false
        if (this.type === 'add') {
          await this.onAdd(this.form)
        } else {
          await this.onUpdate({
            id: this.id,
            roleName: this.form.roleName,
            description: this.form.description,
          })
        }
        this.onIsOutRoleGroupList()
      },
    },
  }
</script>
<style lang="less" scoped>
  .sidebar-classify {
    .item {
      padding: 12px 0 12px 25px;
      color: #333;
      font-size: 14px;
      &.item-col {
        cursor: pointer;
      }
      &.active {
        color: #1890ff;
        background-color: rgba(230, 247, 255, 1);
      }
    }
    .title {
      color: #aaaaaa;
    }
    .new-built {
      float: right;
      color: rgba(2, 125, 180, 1);
      margin-right: 15px;
      cursor: pointer;
    }
  }
  .item-row {
    margin-bottom: 20px;
  }
  .item-title {
    text-align: right;
    margin-right: 20px;
    line-height: 32px;
  }
  .item-bnt {
    float: right;
    i {
      color: rgba(2, 125, 180, 1);
      margin-right: 10px;
    }
  }
</style>
